﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>si.draggable</title>
    <style>
        * { margin: 0; padding: 0; }
        div.si-draggable-item { width: 300px; height: 150px; margin: 10px 5px; }
    </style>
</head>
<body>
    <div id="si-draggable-box" style="width: 400px;">
        <div class="si-draggable-item" style="background-color: red">111</div>
        <div class="si-draggable-item" style="background-color: blue">222</div>
        <div class="si-draggable-item" style="background-color: green">333</div>
        <div class="si-draggable-item" style="background-color: yellow">444</div>
        <div class="si-draggable-item" style="background-color: black">555</div>
        <div class="si-draggable-item" style="background-color: orange">666</div>
    </div>

    <link rel="import" href="../si.base/package/si.base.html" />
    <link rel="import" href="../si.common/package/si.common.html" />
    <link rel="import" href="../si.draggable/package/si.draggable.html" />
    <script>
        $(document).ready(function () {
            si.draggable.initDraggable($("#si-draggable-box"));
        });
    </script>
</body>
</html>